{extend name="common/block" /}

{block name="content"}
<div class="container-fluid" style="padding:50px;">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3><a href="/user/user/links"><i class="mdi mdi-step-backward"></i></a></h3>
                </div>
                <div class="card-body">
                    <h4>【{$short.short_code}】的访问统计</h4>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">访问设备信息统计</div>
                <div class="card-body">
                    <canvas id="device" width="345" height="160"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">省访问信息统计</div>
                <div class="card-body">
                    <canvas id="province" width="345" height="160"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">访问城市信息统计</div>
                <div class="card-body">
                    <canvas id="city" width="345" height="160"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card bg-purple">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">浏览量（pv）</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">{$all_visit}</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-devices fa-1-5x"></i></span></div>
                </div>
            </div>

            <div class="card bg-info">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">IP数</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">{$ip_num}</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-devices fa-1-5x"></i></span></div>
                </div>
            </div>

            <div class="card bg-warning">
                <div class="card-body clearfix">
                    <div class="pull-right">
                        <p class="h6 text-white m-t-0">直接访问(pv)</p>
                        <p class="h3 text-white m-b-0 fa-1-5x">{$no_referer}</p>
                    </div>
                    <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                            class="mdi mdi-devices fa-1-5x"></i></span></div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h4>访问次数信息</h4></div>
                <div class="card-body">
                    <div class="btn-group">
                        {volist name="times_area" id="vo"}
                        <a href="?id={$Request.get.id}&times={$key}"
                           class="btn btn-xs {if $Request.get.times == $key}btn-info{else/}btn-default{/if}">{$vo}</a>
                        {/volist}
                    </div>
                    <canvas id="line" width="400" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="jsLogic"}
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/Chart.js"></script>
<script>
    new Chart($("#line"), {
        bezierCurve: false,
        type: 'line',
        data: {
            labels: JSON.parse('{$label|raw}'),
            datasets: [{
                label: '访问数量',
                fill: false,
                borderWidth: 1,
                pointRadius: 2,
                borderColor: "#9966ff",
                pointBackgroundColor: "#9966ff",
                pointBorderColor: "#9966ff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "#9966ff",
                data: JSON.parse('{$day|raw}')
            }]
        },
        legend: {
            display: false,
        },
    });

    new Chart($("#device"), {
        type: 'doughnut',
        data: {
            labels: JSON.parse('{$device_label|raw}'),
            datasets: [{
                data: JSON.parse('{$device|raw}'),
                backgroundColor: JSON.parse('{$device_color|raw}')
            }]
        },
        options: {
            responsive: false,
        }
    });

    new Chart($("#city"), {
        type: 'doughnut',
        data: {
            labels: JSON.parse('{$city_label|raw}'),
            datasets: [{
                data: JSON.parse('{$city|raw}'),
                backgroundColor: JSON.parse('{$city_color|raw}')
            }]
        },
        options: {
            responsive: false
        }
    });
    new Chart($("#province"), {
        type: 'doughnut',
        data: {
            labels: JSON.parse('{$province_label|raw}'),
            datasets: [{
                data: JSON.parse('{$province|raw}'),
                backgroundColor: JSON.parse('{$province_color|raw}')
            }]
        },
        options: {
            responsive: false
        }
    });
</script>
{/block}